<template>
	<div class="page">
		<div class="container">
			<div class="title-box">
        <div class="title">
          <img src="../../assets/img/ic_sign_car_plate_number@2x.png" alt="">
          <span>输入领券车牌</span>
        </div>
        <span class="tip">请点击输入框输入领券的车牌号码</span>
      </div>
      <div class="input-box">
        <div class="carLicense">
          <span class="carLicense-item" :class="{'active': (activeIndex === index && keyboardShow) || (activeIndex === null && changeIndex === index && keyboardShow)}" v-for="(item, index) in normalizedCarLicenseNum" @click="changeCarNo(index)">{{item}}</span>
          <span class="carLicense-item addLicenseLength" v-show="normalizedCarLicenseNum.length !== 8" @click="carLicenseLength8"></span>
        </div>
      </div>

      <div class="submit-btn" :class="{'float-up' : keyboardShow}" @click="query">确认</div>      

			<carLicenseNumKeyBoard v-if="keyboardShow" :activeIndex="activeIndex" :changeIndex="changeIndex" :licenseNumLength="normalizedCarLicenseNum.length" :keyboard-show="keyboardShow" :car-license-num="carLicenseNum" @getLicenseNum="getLicenseNum" @closeKeyboard="keyboardShow = false"></carLicenseNumKeyBoard>
		</div>
	</div>
</template>
<script>
	import carLicenseNumKeyBoard from '../../components/carLicenseNumKeyBoard'
	export default {
		components: {
			carLicenseNumKeyBoard
		},
		data() {
			return {
				cardNum: '',
				isHaveSameCar: false,
				isCarNo: true,
				isCardNum: false,
				carLicenseNum: '',
				keyboardShow: false,
				carNoList: [],
				chooseCarList: [],
				normalizedCarLicenseNum: ['', '', '', '', '', '', ''],
				logo: '',
				changeIndex: null,
        currentType: 0,
        title: '发放优惠券'
			}
		},
		created() {
      this.$store.commit('setTitle',this.title)
      this.$store.commit('setShowCloseBtn',false)
			if(this.carLicenseNum.length) {
				var carNum = this.removeColor(this.carLicenseNum);
				this.normalizedCarLicenseNum = carNum.split('');
			}
		},
		methods: {
			keyUp(e) {
				var value = e.target.value;
				value = value.replace(/[\W]/g, '')
				value = value.toUpperCase();
				e.target.value = value;
				this.cardNum = value;
			},
			fetchHisCarIsCheckIn(list) {
				for(var i = 0; i < list.length; i++) {
					console.log(list[i]);
					var item = list[i];
				}
			},
			chooseCar(item) {
				this.carLicenseNum = item;
				var carNum = this.removeColor(this.carLicenseNum);
				this.normalizedCarLicenseNum = carNum.split('');
			},
			getLicenseNum(carNo) {
				let isDel = this.carLicenseNum.length > carNo.length;
				// console.log(isDel)
				let self = this;
				this.carLicenseNum = carNo;
				self.normalizedCarLicenseNum.forEach((item, index) => {
					self.$set(self.normalizedCarLicenseNum, index, '');
				})
				carNo.split('').forEach((item, index) => {
					self.$set(self.normalizedCarLicenseNum, index, item);
				})
				if(isDel) {
					this.changeIndex = null;
					return;
				}
				let length = self.normalizedCarLicenseNum.length
				// 修改车牌，使之连续修改
				if(this.changeIndex !== null) {
					if(this.changeIndex < length - 1) {
						this.changeIndex++
					} else {
						this.changeIndex = null
						this.keyboardShow = false
					}
				}
			},
			changeCarNo(index) {
				this.keyboardShow = true;
				if(this.activeIndex === null) {
					this.changeIndex = index;
				}
			},
			query() {
				if(this.carLicenseNum!='' && this.carLicenseNum.length < 7) {
          this.$store.commit('showToast', {
            text: "请输入正确格式的车牌号码",
            duration: 3000
          });
          return;
				}
				this.$router.push({path:'/grantCoupon',query:{'carLicenseNum':this.carLicenseNum}})
			},
			carLicenseLength8() {
				this.normalizedCarLicenseNum.push('')
				this.keyboardShow = true;
			},
			formatToColorCarObj(carNo) {
				if(carNo == null || carNo == "") {
					return "";
				}
				var item = {};
				item.carNo = carNo;
				var reg = /^\d{4}$/;
				if(reg.exec(carNo)) {
					item.color = "";
					return item;
				}
				if(carNo.length === 7) {
					item.color = "";
				} else {
					var lastZM = carNo.substring(7);
					switch(lastZM) {
						case '黑':
							item.color = "黑";
							break;
						case '白':
							item.color = "白";
							break;
						case '黄':
							item.color = "黄";
							break;
						default:
							item.color = '绿';
							break;
					}
				}
				return item;
			},
			removeColor(value) {
				if(!value) {
					return "";
				}
				var reg = /^\d{4}$/;
				if(reg.exec(value)) {
					return value;
				}
				var result;
				if(value.length === 7) {
					result = value.slice(0, 7);
				} else {
					var lastZM = value.substr(value.length - 1, 1);
					switch(lastZM) {
						case '黑':
							result = value.slice(0, 7);
							break;
						case '白':
							result = value.replace("白", '');
							break;
						case '黄':
							result = value.slice(0, 7);
							break;
						default:
							result = value.slice(0);
					}
				}
				return result;
			},
			updateQuickPayInfo(val) {
				if(!val) {
					return;
				}
				if(val.parkLogo) {
					console.log(val.parkLogo)
					this.logo = val.parkLogo;
				}
				if(val.userCarList) {
					var arr = val.userCarList.split(",");
					for(var i = 0; i < arr.length; i++) {
						var item = {};
						item.carCode = this.removeColor(arr[i]);
						this.carNoList.push(item);
						this.fetchHisCarIsCheckIn(this.carNoList);
					}
				}
			},
			getStyle(imgSrc) {
				if(imgSrc){
					return `background-image:url(${imgSrc})`
				}
			},
			getStyleByType(type, pos) {
				var result = '';
				if(this.ui) {
					for(var i = 0; i < this.ui.length; i++) {
						var item = this.ui[i];
						if(type && pos) {
							if(item.viewType == type && item.viewPosition == pos) {
								result = item;
								break;
							}
						} else if(type) {
							if(item.viewType == type) {
								result = item;
								break;
							}
						} else if(pos) {
							if(item.viewPosition == pos) {
								result = item;
								break;
							}
						}
					}
				}
				return result;
			}
		},
		watch: {
			quickPayInfo(val) {
				this.updateQuickPayInfo(val);
			}
		},
		computed: {
			backgroud(){
				var bk = this.getStyleByType('IMAGE',"BACKGROUND");
				if(bk && bk.filePath){
					return bk.filePath;
				}
				return "";
			},
			thirdLogo(){
				var logo = this.getStyleByType('IMAGE',null);
				if(logo && logo.filePath){
					return logo.filePath;
				}
				return "";
			},
			activeIndex() {
				let activeIndex = null;
				this.normalizedCarLicenseNum.some((item, index) => {
					if(item === '') {
						activeIndex = index;
						return true;
					}
				})
				return activeIndex !== null ? activeIndex : null;
			},
			plateNumber: function() {
				return 8;
			},
			haveNum: function() {
				if(this.isCarNoType) {
					if(this.carLicenseNum) {
						return true;
					}
				} else {
					if(this.cardNum) {
						return true;
					}
				}
				return false
      },
		}

	}
</script>

<style lang="less">
html,body{
  background: #ffffff;
}
html{
  position: relative;
}
.title-box{
  height: 120px;
  // border: 1px solid red;
  padding: 0px 60px;
  margin-top: 25px;
  .title{
    img{
      width: 48px;
      height: 48px;
      margin-right: 20px;
    }
    span{
      font-size: 36px;
      font-weight: bold;
      letter-spacing: 1.1px;
    }
  }
  .tip{
    font-size: 24px;
    letter-spacing: 1.3px;
  }
}
.input-box{
  padding: 0px 60px;
  height: 100px;
  // border: 1px solid blue;
  margin-top: 40px;
  .carLicense {
    display: flex;
      .carLicense-item {
        flex: 1;
        height: 85px;
        line-height: 85px;
        font-size: 48px;
        text-align: center;
        color: #333;
        position: relative;
        background: #fff;
        &:nth-child(2) {
          margin-right: 24px;
          position: relative;
          &:after {  
            content: '';
            position: absolute;
            right: -16px;
            top: 50%;
            width: 6px;
            height: 6px;
            background: #999;
            border-radius: 50%;
            transform: translateY(-50%);
          }
        }
        &:before {
            content: " ";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0; 
            border: 4px solid rgba(0, 0, 0, 0.3);
            transform: scale(0.51);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            box-sizing: border-box;
        }
        &.active {
          &:before { 
            content: " ";
            width: 200%;
            height: 200%;
            position: absolute;
            top: 0;
            left: 0; 
            border: 8px solid rgb(24, 117, 237);
            transform: scale(0.51);
            -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
            box-sizing: border-box;
            z-index: 100;
          }
        }  
        &.addLicenseLength {
        &:before {
          content: " ";
          width: 200%;
          height: 200%;
          position: absolute;
          top: 0;
          left: 0; 
          border-top: 4px dashed rgba(0, 0, 0, 0.3);
            border-right: 4px dashed rgba(0, 0, 0, 0.3);
            border-bottom: 6px dashed rgba(0, 0, 0, 0.3);
          transform: scale(0.51);
          -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
          box-sizing: border-box;
          background: url('../../assets/img/carlicenseeditbox_ic_+@2x.png') no-repeat center center;
          background-size: 48px 48px;
        }
      }
    }
  }
}
.submit-btn{
  height: 100px;
  line-height: 100px;
  width: 100%;
  background-color: @blue;
  font-size: 34px;
  color: #FFFFFF;
  letter-spacing: 1.1px;
  text-align: center;
  margin-top: 100px;
  position: absolute;
  bottom: 0;
  &.float-up{
    bottom: 580px;
  }
}
</style>